<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css对表格的操作</title>
    <link rel="stylesheet" href="/static/css/myDocPage.css">
    <script src="/static/jquery-3.4.1.js"></script>
</head>
<body>
<div>
    <h1>一. 简单控制</h1>
    <h2>1.1 列的悬浮显示</h2>
    <article>
        <div id="my-p" style="position: relative;">
            alksdsdhkjfkljhsdgffkljhgakfjghkhj
            <p id="child-p" style="display: none; position: absolute; top: 100%; left: 50%;">alksdsdhkjfkljhsdgffkljhgakfjghkhj</p>
        </div>
    </article>
</div>
</body>
<script>

    $(function () {
        eventInit();
    });

    function eventInit() {
        $('#my-p').hover(function () {
            $('#child-p').show();
        }, function () {
            $('#child-p').hide();
        });
    }

</script>
</html>